{% extends "base.html" %}

{% block title %}Account List{% endblock %}

{% block body %}
    {# 检查是否登录 #}
    {% if user_info %}

        <!-- Modal Password -->
        {% for a in user_info.accounts.all %}
            <div class="modal" id="modal-pwd-{{ a.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">{{ a.name }} - Account Info</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="list-group">
                                <span class="list-group-item"><b class="text-uppercase">Account</b> :
                                    <span id="modal-info-account-{{ a.id }}"></span></span>
                                <span class="list-group-item"><b class="text-uppercase">Password</b> :
                                    <span id="modal-info-pwd-{{ a.id }}"></span></span>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Okay</button>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                // 如果已经解锁，则解密数据
                $(document).ready(function () {
                    if (isLogin()) {
                        // $("#account-name").text(decrypt_data("{{ a.name }}"));
                        // 检测解锁状态
                        try {
                            $("#modal-info-account-{{ a.id }}").text(decrypt_data("{{ a.account }}"));
                            $("#modal-info-pwd-{{ a.id }}").text(decrypt_data("{{ a.password }}"));
                        }
                        catch (e) {
                            console.log(e.toString());
                            $("#modal-info-account-{{ a.id }}").text("This content is locked.");
                            $("#modal-info-pwd-{{ a.id }}").html("<b class=\"text-danger\">The key your provide is wrong, unlock failed, please refresh.</b>");
                            del_pwd();
                        }
                    }
                    else {
                        $("#modal-info-account-{{ a.id }}").text("This content is locked.");
                        $("#modal-info-pwd-{{ a.id }}").html("<b class=\"text-warning\">This content is locked. Please enter your key to unlock.</b>");
                    }
                })
            </script>
        {% endfor %}

        <!-- Modal Confirm Delete -->
        {% for a in user_info.accounts.all %}
            <div class="modal" id="modal-delete-{{ a.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">{{ a.name }} - Account Info</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form method="post" action="/site/account-delete">
                            {% csrf_token %}
                            <input type="hidden" name="id" value="{{ a.id }}">
                            <input type="hidden" name="redirect" value="/site/account-list">
                            <div class="modal-body">
                                Are you sure to delete the account "{{ a.name }}" ?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                                <button type="submit" class="btn btn-primary">Confirm</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        {% endfor %}

        <!-- Modal Edit -->
        {% for a in user_info.accounts.all %}
            <div class="modal" id="modal-edit-{{ a.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">{{ a.id }} {{ a.name }} - Account Info</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form method="post" action="/site/account-list">
                            {% csrf_token %}
                            <input type="hidden" name="id" value="{{ a.id }}">
                            <input type="hidden" name="action" value="update">
                            <div class="modal-body">
                                <div id="modal-edit-text-{{ a.id }}" class="form-text"></div>
                                <div class="form-group">
                                    <label for="modal-edit-platform-{{ a.id }}" class="col-form-label">Platform:</label>
                                    <select id="modal-edit-platform-{{ a.id }}" class="form-control" name="platform">
                                        {% for platform in user_info.account_platforms.all %}
                                            <option value="{{ platform.name }}">{{ platform.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="modal-edit-name-{{ a.id }}" class="col-form-label">Account Name:</label>
                                    <input id="modal-edit-name-{{ a.id }}" type="text" class="form-control" name="name" value="{{ a.name }}">
                                </div>
                                <div class="form-group">
                                    <label for="modal-edit-account-{{ a.id }}" class="col-form-label">Account:</label>
                                    <input id="modal-edit-encrypted-account-{{ a.id }}" type="hidden" name="account">
                                    <input id="modal-edit-account-{{ a.id }}" type="text" class="form-control" value="{{ a.account }}">
                                </div>
                                <div class="form-group">
                                    <label for="modal-edit-password-{{ a.id }}" class="col-form-label">Password:</label>
                                    <input id="modal-edit-encrypted-password-{{ a.id }}" type="hidden" name="password">
                                    <input id="modal-edit-password-{{ a.id }}" type="text" class="form-control" value="{{ a.password }}">
                                </div>
                                <div class="form-group">
                                    <label for="modal-edit-notes-{{ a.id }}" class="col-form-label">Notes:</label>
                                    <input id="modal-edit-encrypted-notes-{{ a.id }}" type="hidden" name="notes">
                                    <textarea id="modal-edit-notes-{{ a.id }}" type="text" class="form-control">{{ a.notes }}</textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                <button id="modal-edit-submit-{{ a.id }}" type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <script>
                $("#select-platform-{{ a.id }}").val('{{ a.platform }}')
                // 如果已经解锁，则解密数据
                $(document).ready(function () {
                    if (isLogin()) {
                        // $("#account-name").text(decrypt_data("{{ a.name }}"));
                        // 检测解锁状态
                        try {
                            $("#modal-edit-account-{{ a.id }}").val(decrypt_data("{{ a.account }}"));
                            $("#modal-edit-password-{{ a.id }}").val(decrypt_data("{{ a.password }}"));
                            $("#modal-edit-notes-{{ a.id }}").val(decrypt_data("{{ a.notes }}"));
                        }
                        catch (e) {
                            console.log(e.toString());
                            $("#modal-edit-platform-{{ a.id }}").attr("readonly", "readonly");
                            $("#modal-edit-name-{{ a.id }}").attr("readonly", "readonly");
                            $("#modal-edit-account-{{ a.id }}").val("This content is locked.");
                            $("#modal-edit-account-{{ a.id }}").attr("readonly", "readonly");
                            $("#modal-edit-password-{{ a.id }}").val("This content is locked.");
                            $("#modal-edit-password-{{ a.id }}").attr("readonly", "readonly");
                            $("#modal-edit-notes-{{ a.id }}").val("This content is locked.");
                            $("#modal-edit-notes-{{ a.id }}").attr("readonly", "readonly");
                            $("#modal-edit-submit-{{ a.id }}").remove();
                            $("#modal-edit-text-{{ a.id }}").html("<b class=\"text-danger\">The key your provide is wrong, unlock failed, please refresh.</b>");
                            del_pwd();
                        }
                    }
                    else {
                        $("#modal-edit-platform-{{ a.id }}").attr("readonly", "readonly");
                        $("#modal-edit-name-{{ a.id }}").attr("readonly", "readonly");
                        $("#modal-edit-account-{{ a.id }}").val("This content is locked.");
                        $("#modal-edit-account-{{ a.id }}").attr("readonly", "readonly");
                        $("#modal-edit-password-{{ a.id }}").val("This content is locked.");
                        $("#modal-edit-password-{{ a.id }}").attr("readonly", "readonly");
                        $("#modal-edit-notes-{{ a.id }}").val("This content is locked.");
                        $("#modal-edit-notes-{{ a.id }}").attr("readonly", "readonly");
                        $("#modal-edit-submit-{{ a.id }}").remove();
                        $("#modal-edit-text-{{ a.id }}").html("<b class=\"text-warning\">This content is locked. Please enter your key to unlock.</b>");
                    }
                });

                //提交加密的数据
                $("#modal-edit-submit-{{ a.id }}").click(function () {
                    $("#modal-edit-encrypted-account-{{ a.id }}").val(encrypt_data($("#modal-edit-account-{{ a.id }}").val()));
                    $("#modal-edit-encrypted-password-{{ a.id }}").val(encrypt_data($("#modal-edit-password-{{ a.id }}").val()));
                    $("#modal-edit-encrypted-notes-{{ a.id }}").val(encrypt_data($("#modal-edit-notes-{{ a.id }}").val()));
                });
            </script>
        {% endfor %}

        <!-- Quick Operate Navbar -->
        {% include "component/quick-operate-navbar.html" %}

        {% if accounts|length == 0 %}
            <div class="list-group">
                <div class="list-group-item flex-column align-items-start">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1"><i class="material-icons-sm">error_outline</i>
                            Empty</h5>
                        <small>{% now "t" %}</small>
                    </div>
                    <p class="mb-1">You have no any account platforms.</p>
                    <small>Use <b>Quick Add</b> to add a new accounts!</small>
                </div>
            </div>
        {% else %}
            <div class="card">
                <div class="card-header">Account List</div>
                <div class="card-body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th scope="col" class="text-center">ID</th>
                            <th scope="col" class="text-center">Platform</th>
                            <th scope="col" class="text-center">Name</th>
                            <th scope="col" class="text-center">Account</th>
                            <th scope="col" class="text-center">Notes</th>
                            <th scope="col" class="text-center">Password</th>
                            <th scope="col" class="text-center">Option</th>
                        </tr>
                        </thead>
                        <tbody>

                        {% for a in accounts %}
                            <tr>
                                <th scope="row" class="text-center">{{ a.id }}</th>
                                <td class="text-center">{{ a.platform }}</td>
                                <td class="text-center">{{ a.name|slice:":10" }}</td>
                                <td id="td-account-{{ a.id }}" class="text-center">{{ a.account|slice:":20" }}</td>
                                <td id="td-notes-{{ a.id }}" class="text-center text-muted">{{ a.notes|slice:":15" }}</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-link text-info" data-toggle="modal" data-target="#modal-pwd-{{ a.id }}">
                                        <i class="material-icons">visibility</i>
                                    </button>
                                </td>
                                <td class="text-center dropright">
                                    <button class="btn btn-link text-secondary" type="button" id="dropdownMenu-{{ a.id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="material-icons">menu</i>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenu-{{ a.id }}">
                                        {# <h6 class="dropdown-header">Select an action</h6> #}
                                        <button type="button" class="dropdown-item text-muted" data-toggle="modal" data-target="#modal-edit-{{ a.id }}">
                                            <i class="material-icons-sm">edit</i> Quick Edit
                                        </button>
                                        <a class="dropdown-item text-muted" href="/site/account-detail?id={{ a.id }}">
                                            <i class="material-icons-sm">details</i> Details
                                        </a>
                                        <button type="button" class="dropdown-item text-danger" data-toggle="modal" data-target="#modal-delete-{{ a.id }}">
                                            <i class="material-icons-sm">delete</i> Delete
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <script>
                                // 如果已经解锁，则解密数据
                                $(document).ready(function () {
                                    if (isLogin()) {
                                        // $("#account-name").text(decrypt_data("{{ a.name }}"));
                                        // 检测解锁状态
                                        try {
                                            $("#td-notes-{{ a.id }}").text(decrypt_data("{{ a.notes }}"));
                                            $("#td-account-{{ a.id }}").text(decrypt_data("{{ a.account }}"));
                                        }
                                        catch (e) {
                                            console.log(e.toString());
                                            $("#td-notes-{{ a.id }}").html("<b class=\"text-danger\">The key your provide is wrong, unlock failed, please refresh.</b>");
                                            $("#td-account-{{ a.id }}").text("This content is locked.");
                                            del_pwd();
                                        }
                                    }
                                    else {
                                        $("#td-notes-{{ a.id }}").html("<b class=\"text-warning\">Content is locked.</b>");
                                        $("#td-account-{{ a.id }}").html("<b class=\"text-warning\">Content is locked.</b>");
                                    }
                                })
                            </script>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    {% else %}
        {% include "component/jump-to-sign-in.html" %}
    {% endif %}

    <!-- 加载数据安全组件 -->
    {% include "component/data-secure.html" %}
{% endblock %}